@import url(../../assets/css/normalize.css);
@import url(../../assets/css/common.css);

.head {
    background-color: #fff;
    height: 80px;
    align-items: center;
    justify-content: space-between;

    .left a,
    .right a {
        color: #00bdff;
    }

    .left h2 {
        text-align: center;
        height: 60px;
        width: 160px;
        padding-top: 40px;
    }

    .left {
        background: url(../../assets/imgs/logo-white.png) no-repeat;
        background-position: 4px 18px;
    }
}

.main {
    padding-top: 80px;
    width: 100%;
    height: 100%;
    background-color: #f3f5f8;

    .form {
        background-color: #fff;
        height: 100%;
        position: relative;

        .userp,.telp,.yzmp,.passp{
            height: 20px;
            position: absolute;
            right: 280px;
            color: red;
            display: none;
            span{
                display: inline-block;
                width: 16px;
                height: 16px;
                position: relative;
                background-color: #00bdff;
                top: 3px;
                background: url(../../assets/imgs/sprite2.png) no-repeat 0 -128px;
            }
        }
        .userp{
            top: 164px;
        }
        .telp{
            top: 225px;
            right: 252px;
        }
        .yzmp{
            top:284px;
            right: 280px;
        }
        .passp{
            top: 344px;
            right: 266px;
        }

        .form-zx {
            width: 420px;
            height: 480px;
            margin: 0px auto;
            position: relative;

            h2 {
                font-size: 38px;
                color: #00bdff;
            }

            p {
                font-size: 26px;
                color: #00bdff;
                margin-bottom: 10px;
            }

            .form-bg {
                width: 100%;
                height: 40px;
                line-height: 40px;
                background-color: #00bdff;
                border-radius: 4px;
                padding-left: 30px;
                box-sizing: border-box;

                span {
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    background: url(../../assets/imgs/reg-gift.png) no-repeat center;
                }

                p {
                    display: inline-block;
                    color: #fff;
                }
            }

            input {
                width: 100%;
                height: 40px;
                border: 1px solid #c5c5c5;
                box-sizing: border-box;
                padding: 0 20px;
                
            }
            input,button{
                margin-top: 20px;
            }

            .yzm{
                width: 80%;
                border-right: none;
                
            }
            button{
                cursor: pointer;
                width: 20%;
                height:40px;
                border: 1px solid #c5c5c5; 
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
                position: absolute;
                
            }

            .check-p{
                font-size: 12px;
                color: #111;
                a{
                    color: #00bdff;
                }
                
            }

            .check{
                margin-right: 6px;
                width: 13px;
                height: 13px;
            }

            .now{
                width: 100%;
                border-radius: 4px;
                color: #5f5f5f;
                background-color: #e0e0e0;
               
            }

        }
    }
}